<template>
  <div class="order">
    <van-nav-bar class="orderNav" title="所有订单列表" />
    <div class="items-box">
      <van-tabs v-model="active">
        <van-tab title="待支付">
          <div v-for="(item, index) in list" :key="index">
            <goods
              v-if="item.status === 0"
              class="items"
              :goodlist="item"
              @to_refund="item.status = $event"
              @confirmorder="list.splice(index, 1)"
              @to_confirmrefund="item.status = $event"
              @to_confirmdelivery="item.status = $event"
            >
            </goods>
          </div>
        </van-tab>
        <van-tab title="待配送">
          <div v-for="(item, index) in list" :key="index">
            <goods
              v-if="item.status === 1"
              class="items"
              :goodlist="item"
              @to_refund="item.status = $event"
              @confirmorder="list.splice(index, 1)"
              @to_confirmrefund="item.status = $event"
              @to_confirmdelivery="item.status = $event"
            >
            </goods>
          </div>
        </van-tab>
        <van-tab title="待自提">
          <div v-for="(item, index) in list" :key="index">
            <goods
              v-if="item.status === 2"
              class="items"
              :goodlist="item"
              @to_refund="item.status = $event"
              @confirmorder="list.splice(index, 1)"
              @to_confirmrefund="item.status = $event"
              @to_confirmdelivery="item.status = $event"
            >
            </goods>
          </div>
        </van-tab>
        <van-tab title="已收货">
          <div v-for="(item, index) in list" :key="index">
            <goods
              v-if="item.status === 3"
              class="items"
              :goodlist="item"
              @to_refund="item.status = $event"
              @confirmorder="list.splice(index, 1)"
              @to_confirmrefund="item.status = $event"
              @to_confirmdelivery="item.status = $event"
            >
            </goods>
          </div>
        </van-tab>
        <van-tab title="售后退款">
          <div v-for="(item, index) in list" :key="index">
            <goods
              v-if="item.status === 4"
              class="items"
              :goodlist="item"
              @to_refund="item.status = $event"
              @confirmorder="list.splice(index, 1)"
              @to_confirmrefund="item.status = $event"
              @to_confirmdelivery="item.status = $event"
            >
            </goods>
          </div>
        </van-tab>
        <van-tab title="已退款">
          <div v-for="(item, index) in list" :key="index">
            <goods
              v-if="item.status === 5"
              class="items"
              :goodlist="item"
              @to_refund="item.status = $event"
              @confirmorder="list.splice(index, 1)"
              @to_confirmrefund="item.status = $event"
              @to_confirmdelivery="item.status = $event"
            >
            </goods>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import Goods from './components/goods'
// import { getGoodsList } from '@/api/order.js'
export default {
  name: 'index',

  data () {
    return {
      active: 0,
      list: [{
        shop_name: '新佳宜',
        shop_id: 99898,
        status: 0,
        price: 100,
        id: 119,
        user_receive_address: '测试地址1',
        user_receive_name: '测试名字1',
        receive_user_phone: 18875958888,
        packing: 2,
        delivery_money: 2,
        sh_shop: {
          shop_phone: 18956892145,
          shop_address: '测试商家地址1'
        }
      }, {
        shop_name: '大润发',
        shop_id: 89546,
        status: 1,
        price: 50,
        id: 117,
        user_receive_address: '测试地址2',
        user_receive_name: '测试名字2',
        receive_user_phone: 18875958888,
        packing: 2,
        delivery_money: 2,
        sh_shop: {
          shop_phone: 18956892145,
          shop_address: '测试商家地址2'
        }
      }, {
        shop_name: '家乐福',
        shop_id: 784523,
        status: 2,
        price: 120,
        id: 118,
        user_receive_address: '测试地址3',
        user_receive_name: '测试名字3',
        receive_user_phone: 18875958888,
        packing: 2,
        delivery_money: 2,
        sh_shop: {
          shop_phone: 18956892145,
          shop_address: '测试商家地址2'
        }
      }, {
        shop_name: '零食很忙',
        shop_id: 78523,
        status: 3,
        price: 80,
        id: 120,
        user_receive_address: '测试地址4',
        user_receive_name: '测试名字4',
        receive_user_phone: 18875958888,
        packing: 2,
        delivery_money: 2,
        sh_shop: {
          shop_phone: 18956892145,
          shop_address: '测试商家地址3'
        }
      }, {
        shop_name: '长沙臭豆腐',
        shop_id: 456546545,
        status: 4,
        price: 60,
        id: 121,
        user_receive_address: '测试地址5',
        user_receive_name: '测试名字5',
        receive_user_phone: 18875958888,
        packing: 2,
        delivery_money: 2,
        sh_shop: {
          shop_phone: 18956892145,
          shop_address: '测试商家地址4'
        }
      }, {
        shop_name: '酸辣鱼',
        shop_id: 541523123,
        status: 5,
        price: 70,
        id: 122,
        receive_user_phone: 18875958888,
        packing: 2,
        delivery_money: 2,
        sh_shop: {
          shop_phone: 18956892145,
          shop_address: '测试商家地址5'
        }
      }],
      pageNum: 1,
      pageSize: 5,
      alist: []
    }
  },
  components: {
    Goods
  },
  created () {
    this.loadGoodsList()
  },
  mounted () {

  },
  methods: {
    async loadGoodsList () {
      // const { data } = await getGoodsList({
      //   pageNum: this.pageNum,
      //   pageSize: this.pageSize
      // })
      // this.alist.push(...data.data.rows)
      // console.log(data)
    },
    changeStatus (val) {

    }
  }
}
</script>

<style scoped lang="less">
.order {
  .orderNav {
    position: fixed;
    width: 100%;
    top: 0;
    background-color: #fff;
    font-size: 13px;
  }
  .items-box {
    padding: 0 30px;
    margin-top: 92px;
    margin-bottom: 150px;
    display: flex;
    align-items: center;
    flex-direction: column;
    /*  .items {
      margin-top: 30px;
      width: 720px;
      height: 226px;
      box-shadow: 2px 5px 5px 5px rgba(0, 0, 0, 0.1);
    } */
  }
}
</style>
